<template>
  <div class="main-box">
    <a-button size="small" @click="handleZoom(0.2)">放大</a-button>
    <a-button size="small" @click="handleZoom(-0.2)">缩小</a-button>
    <div class="canvas" ref="canvas"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import BpmnViewer from "bpmn-js/lib/Viewer"
import createDefaultBpmnXml from '@/components/Camunda/Bpmn/src/defaultBpmnXml'

const canvas = ref(null)
const bpmnViewer = ref(null)
const scale = ref(1)

onMounted(() => {
  getImg()
})

const getImg = async () => {
  try {
    // 清理旧实例
    if (bpmnViewer.value) {
      await bpmnViewer.value.destroy()
      canvas.value.innerHTML = ""
    }

    // 初始化查看器
    bpmnViewer.value = new BpmnViewer({
      container: canvas.value,
      height: 540,
    })

    // 生成 BPMN XML
    const xml = createDefaultBpmnXml('process_1', 'diagram_1')

    // 导入 XML
    await bpmnViewer.value.importXML(xml)

    // 自适应缩放
    const canvasInstance = bpmnViewer.value.get("canvas")
    canvasInstance.zoom("fit-viewport")
    scale.value = canvasInstance.zoom()
  } catch (err) {
    console.error('BPMN 渲染失败:', err)
    // 这里可以添加用户提示
  }
}

const handleZoom = (delta) => {
  const newScale = scale.value + delta
  if (newScale < 0.2 || newScale > 3) return

  scale.value = newScale
  bpmnViewer.value.get("canvas").zoom(scale.value)
}
</script>

<style scoped>
/* 保持原有样式不变 */
.canvas {
  margin: 10px;
}

:deep(.nodeSuccess:not(.djs-connection)) {
  .djs-visual > :nth-child(1) {
    stroke: #f70e0e !important;
    stroke-width: 3px !important;
  }
}
</style>
